import Qfpage from "../../components/Qfpage/Qfpage";
import { 
    Space,
    Table,
    Button,
    Drawer, 
    message,
    Form,
    Input,
    InputNumber,
    Popconfirm,
    Modal
    } from 'antd';
import 'antd/dist/antd.css';
import './style.scss';
import React from 'react';
import { useMemo,useEffect,useState,useRef } from "react";
import {getAllType,addType,delType,editType } from '../../api/roomType'
const Room =()=>{

    
    const [name,setName] = useState('');
    const [price,setPrice] =useState('')
    const getData = async ()=>{
        const postData = { limit,page };
        if(name) postData.name = name;
        if(price) postData.price = price;

        let res = await getAllType(postData)
        const {  success ,data, count} = res;
        if(success) {
            setData(data);
            setTotal(count)
        };   
    }
    //点击添加出现抽屉
    const [visible, setVisible] = useState(false);
    const [size, setSize] = useState();
    const showLargeDrawer = () => {
        setSize('large');
        setVisible(true);
    };
    
    const onClose = () => {
        setVisible(false);
        setShowEdit(false)
    };
    //表格类型
    const[data,setData] = useState([])
    const [limit,setLimit] = useState(30)
    const [ page,setPage] = useState(1)
    const [total ,setTotal] = useState(0);
    const getDate = async () => {
        const res = await getAllType({limit,page})
    }
    useEffect(()=>{
        getDate()
    },[])
    const formRef = useRef(null)
    //添加
    const handleAdd = async ()=>{
       const values = formRef.current.getFieldValue()
       const res = await addType(values)
       const {success} = res
       if(!success) return message.warning('添加失败')
       message.success('添加成功')
       getData()
       onClose()
       formRef.current.resetFields()
    }
    //删除
    const confirmDel = async (id) => {
        const res = await delType({ typeid: id });
        const { success } = res;
        if (!success) return message.warning('删除失败')
        message.success('删除成功');
        getData();
    }
    const { confirm } = Modal;
    const destroyAll = () => {
        Modal.destroyAll();
    };
    const handlerDel = (id) => {
        confirm({
            content: <Button onClick={destroyAll}>确定删除？</Button>,
            okText:'删除',
            cancelText:'再想想',
            onOk() {
                confirmDel(id)
            },
            onCancel() {
            },
        });
    };
    const columns= useMemo(()=>[
        {title:'房型名', key:'name',dataIndex:'name'},
        {title:'床数量', key:'beds',dataIndex:'beds'},
        {title:'价格', key:'price',dataIndex:'price'},
        {
            title:'押金', 
            key:'yaPrice' ,
            dataIndex:'yaPrice',
            cell({row}){
                return row.yaPrice || '无'
            }
        },
        {title:'简称', key:'shortName',dataIndex:'shortName'},
        {title:'入住人数', key:'liveLimit',dataIndex:'liveLimit'},
        {title:'早餐券数量', key:'couponNum',dataIndex:'couponNum'},
        {
            title:'操作',
            key:'del',
            dataIndex:'del',
            render: (_,row) =>
                <>
                    <Button onClick={() => handlerDel(row._id)} style={{color:'red'}}>
                        删除
                    </Button>
                    <Button onClick={() => openEdit(row)} style={{color:'blud'}}>
                        修改
                    </Button>
                    
                </> 
                
        },

    ],[])
    //修改
    const [showEdit, setShowEdit] = useState(false);
    const editRef = useRef(null);
    const [curRow, setCurRow] = useState(null)
    const openEdit = (row) => {
        setCurRow(row)
        editRef.current.setFieldsValue(row)
        setShowEdit(true); 
    }
    const handleEdit = async () => {
        const values = editRef.current.getFieldsValue(true);
        let res = await editType({
            ...values,
            typeid: curRow._id
        })
        const { success } = res
        if (!success) return message.warning('修改失败')
        message.success('修改成功')
        getData()
        setShowEdit(false)
    }
    return(
        <Qfpage title="房型维护" >
            {/* 添加 */}
            <div style={{margin:'5px'}}>
                <Button type="primary" onClick={showLargeDrawer}>添加</Button>
            </div>
            <div style={{ marginLeft: '60%',display:"flex"}}>
                    <Input placeholder="输入房型名称" onChange={setName}/>
                    <Button type="primary" onClick={getData}>搜索</Button>
                </div>
            <Table columns={columns} dataSource={data}/>
            {/* 添加抽屉 */}
            <Drawer
                title={`房间信息`}
                placement="right"
                size={size}
                onClose={onClose}
                visible={visible}
            >
                <Form labelCol={{span: 4}} ref={formRef}>
                    {/* <Popconfirm
                        icon={null}
                        onConfirm={handleAdd}
                        onCancel={onClose}
                        okText="添加"
                        cancelText="取消"
                    >
                        <Button type="primary">是否添加</Button>
                    </Popconfirm> */}
                    <Button type="primary" onClick={handleAdd}>添加</Button>
                    <Button onClick={onClose}>取消</Button>
                    <Form.Item 
                    label="房型名" 
                    name='name' 
                    rules={[
                        {
                          required: true,
                          message: '你无法违背无上意志',
                        },
                      ]}
                    >
                        <Input placeholder="输入房型名" />
                    </Form.Item>
                    <Form.Item label="房间简称" name='shortName'>
                        <Input placeholder="输入房间简称" />
                    </Form.Item>
                    <Form.Item label="入住人数" name='liveLimit'>
                        <InputNumber min={1} max={5} defaultValue='1'/>
                    </Form.Item>
                    <Form.Item label="床数量" name='beds'>
                        <InputNumber min={1} max={5} defaultValue='1'/>
                    </Form.Item>
                    <Form.Item 
                        label="价格" 
                        name='price'
                        rules={[
                            {
                            required: true,
                            message: '你无法违背无上意志',
                            },
                        ]}
                    >
                        <Input placeholder="输入价格" />
                    </Form.Item>
                    <Form.Item label="押金" name='yaPrice'>
                        <Input placeholder="输入押金" />
                    </Form.Item>
                    <Form.Item label="早餐券数量" name='couponNum'>
                        <InputNumber min={0} max={5} defaultValue='1'/>
                    </Form.Item>
                </Form>
            </Drawer>
            {/* 修改抽屉 */}
            <Drawer
                forceRender={true}
                title={'房间信息'}
                placement="right"
                size={size}
                onClose={onClose}
                visible={showEdit}
            >
                <Form labelCol={{span: 4}} ref={editRef}>
                    <Button type="primary" onClick={handleEdit}>修改</Button>
                    <Button onClick={onClose}>取消</Button>
                    <Form.Item 
                    label="房型名" 
                    name='name' 
                    rules={[
                        {
                          required: true,
                          message: '你无法违背无上意志',
                        },
                      ]}
                    >
                        <Input placeholder="输入房型名" />
                    </Form.Item>
                    <Form.Item label="房间简称" name='shortName'>
                        <Input placeholder="输入房间简称" />
                    </Form.Item>
                    <Form.Item label="入住人数" name='liveLimit'>
                        <InputNumber min={1} max={5} defaultValue='1'/>
                    </Form.Item>
                    <Form.Item label="床数量" name='beds'>
                        <InputNumber min={1} max={5} defaultValue='1'/>
                    </Form.Item>
                    <Form.Item 
                        label="价格" 
                        name='price'
                        rules={[
                            {
                            required: true,
                            message: '你无法违背无上意志',
                            },
                        ]}
                    >
                        <Input placeholder="输入价格" />
                    </Form.Item>
                    <Form.Item label="押金" name='yaPrice'>
                        <Input placeholder="输入押金" />
                    </Form.Item>
                    <Form.Item label="早餐券数量" name='couponNum'>
                        <InputNumber min={0} max={5} defaultValue='1'/>
                    </Form.Item>
                </Form>
            </Drawer>
        </Qfpage>
        
    )
}
export default Room